<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!--<div class="goto">-->
      <!--<router-link to="/ratify">-->
      <!--<img src="../../assets/home_img/left.png" alt="">-->
      <!--</router-link>-->
      <!--</div>-->
      <p>我的账单</p>
    </div>
    <div style="height: 4.4rem"></div>
    <!-- 内容 -->
    <div class="content">
      <!--  搜索框  -->
      <div class="search">
        <form  @submit.prevent="">
          <input type="text" name="name" placeholder="请输入隐患编号" style="text-align:center">
          <button id="searchBtn" type="submit">搜 索</button>
        </form>
      </div>
      <!-- 订单卡片 -->
      <div class="card" v-for="(item, index) in orderData" :key="index">
        <!-- 卡片头部 -->
        <div class="cardhead">
          <p>订单号：<span>{{item.serialNo}}</span> <span class="state">{{item.orderTypeDesc}}</span></p>
        </div>
        <!-- 卡片中间 -->
        <div class="cardbody">
          <div class="cardbox">
            <img src="../../assets/order_img/type.png" alt="" class="cardimg">
            <p>{{item.goodsName}}</p>
            <p class="dingwei">{{item.quota}}{{item.unitType}}</p>
          </div>
          <!-- 司机待定 -->
          <!--<div class="cardbox">-->
            <!--<img src="../../assets/order_img/car.png" alt="" class="cardimg">-->
            <!--<p>豫AE989</p>-->
            <!--<p class="dingwei">你好啊</p>-->
          <!--</div>-->
          <div class="cardbox">
            <img src="../../assets/order_img/time.png" alt="" class="cardimg">
            <p>{{item.createOrderTime}}</p>
          </div>
          <div class="cardbox">
            <img src="../../assets/order_img/site.png" alt="" class="cardimg">
            <p>{{item.storeName}}</p>
          </div>
          <div style="height: 0.5rem"></div>
        </div>
        <!-- 点击查看详情 -->
        <router-link to="/orderDetails">
          <img src="../../assets/order_img/right.png" alt="" class="cardRight">
        </router-link>
      </div>



    </div>
    <div style="height: 6rem"></div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from '../footer/footer'
  export default {
    data(){
      return{
        orderData:'',
      }
    },
    components:{
      Footer
    },
    created(){
      this.orderList();
    },
    methods:{
      orderList(){
        let postData = this.$qs.stringify({
          offset:'',
          limit:'',
          storeId: 1,
        });
        this.$axios({
          method:'POST',
          url:'api/storeOrder/orderList',
          data:postData
        }).then((res)=>{
          console.log(res.data.msg);
          this.orderData = res.data.data;
        }).catch((err)=>{
          console.log(err);
        })
      }
    },

  }


</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header {
    width: 100%;
    height: 2.4rem;
    text-align: center;
    background: #609FE0;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .header p {
    line-height: 2.4rem;
    font-size: 1.05rem;
    color: white;
    font-weight: bolder;
  }
  .goto {
    position: relative;
  }
  .goto img {
    width: 1.8rem;
    height: 1.8rem;
    position: absolute;
    top: 0.3rem;
    left: 0.15rem;
  }
  /* 内容 */
  /* 搜索框 */
  .search {
    position: fixed;
    top: 2.4rem;
    z-index: 99;
    background: white;
    width: 100%;
    height: 2rem;
  }
  .search input{
    height: 1.5rem;
    width: 72%;
    border: 1px solid darkgrey;
    border-radius: 0.3rem;
    outline: none;
    font-size: 0.78rem;
    margin-left: 0.2rem;
  }
  #searchBtn {
    padding: 0;
    margin: 0;
    outline: none;
    width: 22%;
    height: 1.5rem;
    background: white;
    color: #73A4D6;
    border: 1px solid #73A4D6;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    margin-top: 0.2rem;
  }
  /* 订单卡片 */
  .card {
    width: 94%;
    height: 10rem;
    margin-left: 3%;
    background: white;
    border: 1px solid gainsboro;
    border-radius: 0.25rem;
    margin-top: 1rem;
    position: relative;
  }
  .cardhead p {
    color: #666666;
    font-size: 0.9rem;
    margin-left: 0.5rem;
    line-height: 1.8rem;
  }
  .state {
    margin-left: 24%;
    color: #32B47A;
    font-size: 0.87rem;
  }
  .cardRight {
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    top: 43%;
    right: 0.9rem;
  }
  .cardbody {
    width: 100%;
    /*height: 8rem;*/
    /*border-top: 1px solid gainsboro;*/
    /*border-bottom: 1px solid gainsboro;*/
    background: #F8F8F8;
  }
  .cardbox {
    margin-left: 0.6rem;
    padding-top: 0.3rem;
    position: relative;
  }
  .cardimg {
    width: 1.6rem;
    height: 1.5rem;
    vertical-align: bottom;
  }
  .cardbox p {
    display: inline;
    line-height: 1.6rem;
    font-size: 0.9rem;
    color: #666666;
  }
  .cardbox .dingwei {
    position: absolute;
    left: 60%;
  }

</style>